<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css"
	href="/ComputerStore/public/css/admin_content.css">
<script type="text/javascript"
	src="/ComputerStore/public/js/jquery-1.6.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#addBillButton {
	text-decoration: none;
	color: white;
	border-style: ridge;
	border-radius: 0px 20px;
	background-color: #555;
	border-style: ridge;
}
</style>
<title>Danh sách hóa đơn bán lẻ</title>
</head>
<body>
	<h1>Quản lý hóa đơn bán lẻ</h1>
	<div id="options">
		<a id="showList" href="#">&nbsp;&nbsp;&nbsp;Danh sách hóa đơn bán lẻ
			&nbsp;&nbsp;&nbsp;</a> <a id="showForm" href="#">&nbsp;&nbsp;&nbsp;Thêm
			hóa đơn bán lẻ&nbsp;&nbsp;&nbsp;</a>
	</div>
	<br />
	<div id="list">
		<div class="title">Danh sách hóa đơn bán lẻ</div>
		<div class="content">
			<s:form id="bill">
				<table border="1" align="center">
					<tr>
						<th>STT</th>
						<th>Tên KH</th>
						<th>Email</th>
						<th>Địa chỉ</th>
						<th>Số DT</th>
						<th>Ngày mua</th>
						<th>Tổng tiền</th>
						<th>Mã HD</th>
						<th>Thao tác</th>
					</tr>
					<s:iterator value="billList" var="bill" status="itStatus">
						<tr id="<s:property value="id"/>">
							<td align="center"><s:property value="#itStatus.Count" /></td>
							<td><s:property value="customerName" /></td>
							<td><s:property value="customerEmail" /></td>
							<td><s:property value="customerAddress" /></td>
							<td><s:property value="customerPhone" /></td>
							<td><s:property value="datePurchased" /></td>
							<td><s:property value="total" /></td>
							<td><s:property value="id" /></td>
							<td align="center"><a class="operation" name="select"
							href="#" id="<s:property value="id"/>" >&nbsp;Chọn&nbsp;</a></td>
						</tr>
					</s:iterator>
				</table>
			</s:form>
		</div>
	</div>
	<div id="detailList">
		<div class="title">Chi tiết hóa đơn bán lẻ</div>
		<div class="content"  align="center">
			<table border="1" id="detailTable">
				<tr>
					<th>Tên sản phẩm</th>
					<th>Số lượng</th>
					<th>Đơn giá</th>
					<th>Thành tiền</th>
				</tr>
				<s:iterator value="allBillDetailList" var="billDetail">
					<tr id="<s:property value="id"/>">
						<td style="display:none" ><s:property value="bill.id" /></td>
						<td><s:property value="product.name" /></td>
						<td><s:property value="productQuantity" /></td>
						<td><s:property value="productPrice" /></td>
						<td><s:property value="total" /></td>
					</tr>
				</s:iterator>
			</table>
		</div>
	</div>
	
	<!-- Lập hóa đơn bán lẻ -->
	<div id="formAdd">
		<div class="title">Lập phiếu hóa đơn bán lẻ</div>
		<div class="content" align="center">
			<s:form id="form1" action="addBill" method="post">		
			<s:textfield name="bill.customerName" label="Tên khách hàng"
					cssClass="textfield" size="50" />
				<s:textfield name="bill.customerAddress" label="Địa chỉ"
					cssClass="textfield" size="50" />
				<s:textfield name="bill.customerPhone" label="Điện thoại"
					cssClass="textfield" size="50" />
				<s:textfield name="bill.customerEmail" label="Email"
					cssClass="textfield" size="50" />
				<s:select cssClass="textfield" id="productAddSelect"
					label="Tên mặt hàng" name="product.id" list="productList"
					listKey="price+','+id+','+quantity" listValue="name" />
				<s:textfield cssClass="textfield" id="quantityAddTextfield"
					value="0" label="Số lượng" name="quantity" size="50" />
				<s:textfield cssClass="textfield" id="priceAddTextfield" label="Giá"
					disabled="true" size="25" />
				<s:textfield cssClass="textfield" id="quantityInventoryAddTextfield"
					label="Số lượng tồn" disabled="true" size="25" />
					<br />
				<s:a id="addBillButton" href="#">&nbsp;&nbsp;Thêm vào đơn hàng&nbsp;&nbsp;</s:a>
				<s:submit id="button" disabled="true" value="Lập hóa đơn" />
			</s:form>
			<table border="1" id="addBillTable" style="display: none">
				<tr>
					<td colspan="5" align="center"
						style="font-weight: 900; color: red;"><div>
							Tổng tiền: <span id="totalPrice">0</span>
						</div>
					<td>
				</tr>
				<tr>
					<th>Tên sản phẩm</th>
					<th>Số lượng</th>
					<th>Đơn giá</th>
					<th>Thành tiền</th>
					<th>Thao tác</th>
				</tr>
			</table>
		</div>
	</div>
	
	<!-- Javascript -->
<script>
	$(document).ready(function() {
		var count = 0;
		var total = 0;
		var id = 1;
		$("#priceAddTextfield").val($("#productAddSelect").val().split(",")[0].trim());
		$("#quantityInventoryAddTextfield").val($("#productAddSelect").val().split(",")[2].trim());
		
		$("#detailList").css("display", "none");
		$("#formEdit").css("display", "none");
		$("#formAdd").css("display", "none");
		$("#showList").css("border-style", "inset");
		
		$("#showForm").click(function() {
			$(this).css("border-style", "inset");
			$("#showList").css("border-style", "outset");
			$("#list").hide("fast");
			$("#listDetail").hide("fast");
			$("#formEdit").hide("fast");
			$("#detailList").hide("fast");
			$("#formAdd").show("fast");
			
		});

		$("#showList").click(function() {
			$(this).css("border-style", "inset");
			$("#showForm").css("border-style", "outset");
			$("#formAdd").hide("fast");
			$("#formEdit").hide("fast");
			$("#detailList").hide("fast");
			$("#list").show("fast");
			
		});
		
		$("#productAddSelect").change(function(){
			var price = $(this).val().split(",")[0].trim();
			var quantity = $(this).val().split(",")[2].trim();
			$("#priceAddTextfield").val(price);
			$("#quantityInventoryAddTextfield").val(quantity);
		});
		
		$("#addBillButton")
		.click(
				function() {
					if ($("#quantityAddTextfield")
							.val() != "") {
						$("#addBillTable").show(
								"slow");
						var product = $(
								"#productAddSelect")
								.find(
										'option:selected')
								.text();
						var productId = $(
								"#productAddSelect")
								.attr("value")
								.split(",")[1]
								.trim();
						var quantity = $(
								"#quantityAddTextfield")
								.val();
						var price = $(
								"#productAddSelect")
								.val().split(",")[0]
								.trim();

						total = 0;
						var targetExits = 0;
						$("#addBillTable td")
								.each(
										function(i) {
											if (i > 1) {
												var col = (i - 2) % 6;
												totalPrice = 0;
												if (col == 0) {
													var id = $(
															this)
															.text();
													if (id == productId) {
														targetExits = i + 2;
													}
												}
												if (i == targetExits
														&& i != 0) {
													$(
															this)
															.text(
																	quantity);
													quantity = $(
															this)
															.text();
												}
												if (i == targetExits + 2
														&& i != 2) {
													totalPrice = quantity
															* price;
													$(
															this)
															.text(
																	totalPrice);
													totalPrice = price
															* quantity;
												}
											}
										});

						if (targetExits == 0) {
							totalPrice = quantity
									* price;
							var tr = $("<tr id='"+"tr"+productId+"'>");
							var col1 = $("<td style='display:none'>"
									+ productId
									+ "</td>");
							var col2 = $("<td>"
									+ product
									+ "</td>");
							var col3 = $("<td>"
									+ quantity
									+ "</td>");
							var col4 = $("<td>"
									+ price
									+ "</td>");
							var col5 = $("<td>"
									+ totalPrice
									+ "</td>");
							var col6 = $("<td><a id='"+"tr"+productId+"' class='operation' name='deleteRow' href='#'>Xóa</></td></tr>");
							tr.append(col1);
							tr.append(col2);
							tr.append(col3);
							tr.append(col4);
							tr.append(col5);
							tr.append(col6);
							$("#addBillTable")
									.append(tr);
							targetExits = 0;
							id++;
							count++;
							$("#button").attr("disabled",false);
						}

						$("#addBillTable td")
								.each(
										function(i) {
											var col = (i - 2) % 6;
											if (col == 4) {
												total += parseInt($(
														this)
														.text());
											}
										});
						$("#totalPrice")
								.text(total);

					}
				});
$("a").live({
	click : function() {
		if ($(this).attr("name") == "deleteRow") {
			var id = $(this).attr("id");
			$("#" + id + " td").each(function(i) {
				if (i == 4) {
					value = $(this).text();
				}
			});

			total -= value;
			$("#totalPrice").text(total);
			$(this).parent().parent().remove();
			count--;
			if (count == 0) {
				$("#button").attr("disabled",true);
				$("#addBillTable").hide("slow");
			}
		}
	}
});
		
		$("a").click(function(){
			if($(this).attr("name")=="select"){
				$("#list").hide("fast");
				$("#detailList").show("fast");
				$("#showList").css("border-style", "outset");
				var id = $(this).attr("id");
				$("#detailTable td").each(function(i){
					var col= i%5;
					if(col==0 && $(this).text()== id){
						$(this).parent().show("fast");									
					}
					if(col==0 && $(this).text()!= id){
						$(this).parent().hide("fast");
					}						
				});
			}
		});
		
		$("#button")
		.click(
				
				function() {
					$("#addBillTable td")
							.each(
									function(i) {
										if (i > 1) {
											var idProductHidden;
											var quantityHidden;
											var col = (i - 2) % 6;
											if (col == 0) {
												idProductHidden = $('<s:hidden name="idProductList.id"  value="'+ $(this).text()+ '"/>');
												$("#form1").append(idProductHidden);
											} else if (col == 2) {
												quantityHidden = $('<s:hidden name="selectedBillDetailList.productQuantity" value="'+ $(this).text()+ '"/>');
												$("#form1").append(quantityHidden);
											}
										}
									});
				});
	});
	
	
</script>
</body>
</html>